<template>
	<div class="bread_nav">
		<router-link :to="{name: 'home'}">首页</router-link><i v-if="channelTitle !== ''">&lt;</i><router-link :to="{name: 'channel', params:{cid:channelId,name:channelTitle}}" v-if="channelTitle !== ''">{{channelTitle}}</router-link><i v-if="channel !== ''">&lt;</i><router-link :to="{path:channelAlias}">{{channel | limit}}</router-link>
	</div>
</template>

<script>
	export default {
		name: "BreadNav",
		props:["channel", "channelTitle", "channelId"],
		data: function(){
			var path = this.$route.path;
			return{
				channelAlias:path
			}
		},
		filters: {
		  limit: function (value) {
			if (!value) return "";
			value = value.length<20 ? value: value.substr(0, 17)+"...";
			return value;
		  }
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	.bread_nav{
		padding:10/@base 10/@base;
		font-size:14/@base;
		background-color: #fff;
		a{
			color:#000;
			margin:0 10/@base;
		}
	}
</style>
